﻿<!DOCTYPE html>
<html>
<head> 
	<title>Particles with Processing.js</title> 
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> 
	<script type="text/javascript" src="js/processing.js"></script> 
</head>
<body>
<canvas id="display"></canvas> 

<script  data-processing-target="display" type="application/processing"> 
int rows = 12;
int cols = 12;
int margin = 10;
int rowsSpace;
int colsSpace;
int totalBlocks = 144;
Block[] blocks = new Block[totalBlocks];
int width, height;
float targetX, targetY;
float pointerX, pointerY;
float sketchDiagonal;
  
void setup() {
  width = jQuery(document).width() - 30;
    height = jQuery(document).height() - 30;
  size(width, height);
  rowsSpace = ( width - margin ) / rows;
  colsSpace = ( height - margin) / cols;
  sketchDiagonal = width*width + height*height;
  sketchDiagonal *= .6;
  noStroke();
  smooth();
  targetX = width / 2;
  targetY = height / 2;
  pointerX = targetX;
  pointerY = targetY;
  int r = 255;
  int g = 0;
  int b = 255;
  int count = 0;
  for ( int x = 0; x < rows; x++) {
    for ( int y = 0; y < cols; y++ ) {
      Block block = new Block();
      block.x = margin + x*rowsSpace;
      block.y = margin + y*colsSpace;
      r = map(x, 0, rows, 0, 255);
      b = map(y, 0, cols, 0, 255);
      block.baseColor = color( r, g, b, 255);
      block.rotation = 0;
      blocks[count++] = block;
    }
  }
};
  
void draw() {
  background(0);
  pointerX += ( targetX - pointerX)*.16;
  pointerY += ( targetY - pointerY)*.16;
  for ( int i = 0; i < totalBlocks; i++) {
    float dx = blocks[i].x - pointerX;
    float dy = blocks[i].y - pointerY;
    float width = 1.0 - (dx*dx + dy*dy)/sketchDiagonal;
    float angle = Math.atan2(dy, dx);
    blocks[i].wide = width*colsSpace;
    blocks[i].rotation = angle; 
    blocks[i].render();
  }
};
  
void pointerMove(TouchEvent e){
  targetX = e.offsetX;
  targetY = e.offsetY;
};
  
class Block {
  float x = 0.0;
  float y = 0.0;
  float wide = 5.0;
  float rotation = 0.0;
  color baseColor = color(255,255,255,255);
  color detailColor = color(255,255,255,255);
  void render(){
    pushMatrix();
    translate( this.x, this.y);
    fill(this.baseColor);
    rotate(this.rotation);
    rect( 0, -1, this.wide, 2);
    fill(this.detailColor);
    ellipse(0, 0, 3, 3);
    popMatrix();
  }
}
	</script> 
    </body>
</html>